<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div>
        <button id="btn1">全选</button>
        <button id="btn2">反选</button>
        <button id="btn3">取消</button>
    </div>
    <ul id="box">
        <li>
            选项：<input type="checkbox">
        </li>
        <li>
            选项：<input type="checkbox">
        </li>
        <li>
            选项：<input type="checkbox">
        </li>
        <li>
            选项：<input type="checkbox">
        </li>
        <li>
            选项：<input type="checkbox">
        </li>
        <li>
            选项：<input type="checkbox">
        </li>
        <li>
            选项：<input type="checkbox">
        </li>
    </ul>

    <script>

        // 通过id ==> box获取标签再通过便签名选择input标签对象 赋值给变量box，box成为包装input标签对象的数组
        var box = document.getElementById("box").getElementsByTagName("input");

        // 通过id获取三个按钮标签
        var btn = document.getElementsByTagName("button");


        //写法2 简化代码提高性能（推荐）
        btn[0].onclick = setData("true");
        btn[1].onclick = setData(null);
        btn[2].onclick = setData("false");

        function setData(key) {
            return function () {
                for (var i = 0; i < box.length; i++) {
                    box[i].checked = key ? (key == "true" ? true : false) : !box[i].checked;
                }
            }
        }




        // // 给按钮1添加触发事件
        // btn[0].onclick = function () {
        //     // 遍历box对象里的所有元素，也就是input标签，当点击按钮1的时候，遍历所有按钮，给其checked属性赋上true值；让其所有按钮都是选中状态
        //     for (var i = 0; i < box.length; i++) {
        //         box[i].checked = true;
        //     }
        // };

        // btn[1].onclick = function () {
        //     // 遍历box对象里的所有元素，也就是input标签，当点击按钮2的时候，遍历所有按钮，给其checked属性取反；让其选中的按钮取消选择，让未选中的按钮选中
        //     for (var i = 0; i < box.length; i++) {
        //         box[i].checked = !box[i].checked;
        //     }
        // };

        // btn[2].onclick = function () {
        //     // 遍历box对象里的所有元素，也就是input标签，当点击按钮3的时候，遍历所有按钮，给其checked属性赋上false值；让其所有按钮都是取消选中状态
        //     for (var i = 0; i < box.length; i++) {
        //         box[i].checked = false;
        //     }
        // };





    </script>
</body>

</html>